<template>
  <el-card>
    <div class="wrap">
      <el-form>
        年度：<el-select
          v-model="dataform.recentYear"
          @change="yearChange"
          placeholder="请选择年度"
          clearable
        >
          <el-option
            v-for="item in years"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        月份：<el-select
          v-model="dataform.recentMonth"
          @change="monthChange"
          placeholder="请选择月份"
          clearable
        >
          <el-option
            v-for="item in month"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
        >&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button class="addUser" icon="el-icon-search" @click="dateChange"
          >查询</el-button
        >
      </el-form>
      <el-calendar
        v-model="value"
        :first-day-of-week="7"
        :ShowNextPrevMonth="false"
      >
        <template slot="dateCell" slot-scope="{ data }">
          <div>
            {{ data.day.substring(8, 10) }}
            <br />
            <br />
            <div v-for="(item, i) in calendarData" :key="i" class="tTips">
              <div
                v-if="
                  item.year[0] === data.day.substring(0, 4) &&
                  item.month[0] === data.day.substring(5, 7) &&
                  item.day[0] === data.day.substring(8, 10)
                "
                class="ifyear"
              >
                <el-tooltip placement="top" effect="dark">
                  <div slot="content">
                    车辆：{{ item.carNumber }}<br />日期：{{ data.day
                    }}<br />执行任务次数：{{ item.things }}
                  </div>
                  <el-button class="detail" size="mini">车辆信息</el-button>
                </el-tooltip>
              </div>
            </div>
          </div>
        </template>
      </el-calendar>
    </div>
  </el-card>
</template>
<script>
export default {
  props: {
    searchForm: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      years: [],
      dataform: {
        recentYear: "",
        recentMonth: "",
      },
      month: [],
      value: "",
      calendarData: [],
      calendarData1: [
        {
          id: 1,
          years: ["2021"],
          months: ["07"],
          days: ["15"],
          things: "看电影",
          carNumber: "川A12323",
        },
        {
          id: 2,
          years: ["2011"],
          months: ["07"],
          days: ["15"],
          things: "去公园野炊",
          carNumber: "川A1233433",
        },
        {
          id: 3,
          years: ["2021"],
          months: ["07"],
          days: ["02"],
          things: "看星星",
          carNumber: "川A5343",
        },
        {
          id: 4,
          years: ["2019"],
          months: ["07"],
          days: ["08"],
          things: "看月亮",
          carNumber: "川G12323",
        },
      ],
    };
  },
  methods: {
    // 数据初始化
    initSelectYear(year) {
      this.years = [];
      for (let i = 0; i < 5; i++) {
        this.years.push({ value: year - i, label: year - i + "年" });
      }
    },
    initSelectMonth() {
      this.month = [];
      for (let i = 1; i <= 12; i++) {
        this.month.push({ value: i, label: i + "月" });
      }
    },
    yearChange(value) {
      this.dataform.recentYear = value;
    },
    monthChange(value) {
      this.dataform.recentMonth = value;
    },
    //   日期改变
    dateChange() {
      this.value = this.dataform.recentYear + "-" + this.dataform.recentMonth;
      this.axios
        .get("/car/getAllCarTask", {})
        .then((res) => {
          //请求成功，方法回调
          /* console.log( res.data.data.carTasks); */
          this.calendarData = res.data.data.carTasks;
          /* console.log(parseInt(this.calendarData[0].month[0])); */
          for (let i = 0; i < this.calendarData.length; i++) {
            if (parseInt(this.calendarData[i].month[0]) < 10) {
              this.calendarData[i].month[0] =
                "0" + this.calendarData[i].month[0];
            }
            if (parseInt(this.calendarData[i].day[0]) < 10) {
              this.calendarData[i].day[0] = "0" + this.calendarData[i].day[0];
            }
          }
          /* console.log(this.calendarData); */
        })
        .catch((err) => {
          //请求失败
          console.log(err);
        });
    },
  },
  created() {
    this.value = new Date();
    var year = this.value.getFullYear(); //获取当前年
    this.initSelectYear(year);
    this.initSelectMonth();
    this.dataform.recentYear = year;
    this.dataform.recentMonth = this.value.getMonth() + 1;
    this.dateChange();
  },
};
</script>

<style scoped>
.el-calendar-day >>> div {
  width: 100%;
  height: 100%;
}
.tTips {
  padding-top: 25px;
  margin-left: 5px;
  height: 100%;
  display: inline;
}
.ifyear {
  display: inline-block;
}
.ifyear .el-button--mini {
  padding: 7px 8px;
}
.el-calendar-day >>> div br {
  height: 15px;
}
</style>